<template>
	<!-- <uni-nav-bar style="font-weight: bold;" title="意见反馈" :fixed="true" :statusBar="true" :border="false"
		leftWidth="200rpx" rightWidth="200rpx">

		<template v-slot:left>
			<view style="height: 60rpx;width: 60rpx;" @tap="nav_back">
				<image style="width: 100%;height: 100%;"
					src="https://mcdn.chatgk.com/xcx/static/images/public/nav_back.png"></image>
			</view>
		</template>
	</uni-nav-bar> -->
	<view class="flex-column bgview">

		<view class="tag-bgview flex-row">
			<view class="tag-view flex-row" v-for="(item, index) in messageArr" @tap="clickMessagecell(item)"
				:key="index" :class="{ active: selectedOptions.includes(item.txt) }">
				<view class="item flex-column">
					<image class="icon" :src="selectedOptions.includes(item.txt) ? item.selectedImg : item.imageUrl "
						mode="">
					</image>
					<text class="tag-text">{{item.txt}}</text>
				</view>
			</view>
		</view>
		<view class="content1">
			<view class="title">
				我要反馈
			</view>
			<view class="textViewBox flex-row">
				<textarea v-model="messageString" class="textInputView" @input="updateSelection"
					placeholder-style="color: #CCCCCC; font-size: 28rpx"
					placeholder="非常抱歉给您带来的不便！请您在这里说说您在使用产品过程中遇到的问题…（不低于5个字）" />
				<view class="unLoadImages">
					<view class="image-list flex-row">
						<view class="listItem" v-for="(item, index) in fileList" :key="index">
							<image :src="item.url" class="image-preview" />
							<image class="deletButton" src="https://mcdn.chatgk.com/xcx/static/images/feedback/delete.png"
								mode="" @click="removeImage(index)" :style="index == 3 ? 'height: 32rpx' : ''">
							</image>
						</view>
					</view>
					<image class="upLoadButton" src="https://mcdn.chatgk.com/xcx/static/images/feedback/add.png" mode=""
						@click="chooseImage"></image>
				</view>
			</view>
		</view>
		<view class="content2">
			<view class="title">
				联系方式
			</view>
			<input v-model="phone" class="input-phone" type="text" placeholder="请输入您的联系方式（电话/邮箱）"
				placeholder-style="color: #CCCCCC; font-size: 28rpx" @input="validatePhone">
			<p v-if="errorMessage" class="error">{{ errorMessage }}</p>
		</view>
		<view class="submiti" @tap="clicksubmitiButton">
			<text class="submitiButton">提交</text>
		</view>
		<loading v-show="loadshow"></loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadshow: false,
				messageString: "",
				messageArr: [{
						type: 1,
						index: 1,
						txt: '数据有误',
						imageUrl: 'https://mcdn.chatgk.com/xcx/static/images/feedback/image1.png',
						selectedImg: 'https://mcdn.chatgk.com/xcx/static/images/feedback/image1-select.png',

					},
					{
						type: 2,
						index: 2,
						txt: '功能异常',
						imageUrl: 'https://mcdn.chatgk.com/xcx/static/images/feedback/image2.png',
						selectedImg: 'https://mcdn.chatgk.com/xcx/static/images/feedback/image2-select.png',
					},
					{
						type: 3,
						index: 3,
						txt: '服务问题',
						imageUrl: 'https://mcdn.chatgk.com/xcx/static/images/feedback/image3.png',
						selectedImg: 'https://mcdn.chatgk.com/xcx/static/images/feedback/image3-select.png',
					},
					{
						type: 4,
						index: 4,
						txt: '产品意见',
						imageUrl: 'https://mcdn.chatgk.com/xcx/static/images/feedback/image4.png',
						selectedImg: 'https://mcdn.chatgk.com/xcx/static/images/feedback/image4-select.png',
					},
					{
						type: 5,
						index: 5,
						txt: '投诉',
						imageUrl: 'https://mcdn.chatgk.com/xcx/static/images/feedback/image5.png',
						selectedImg: 'https://mcdn.chatgk.com/xcx/static/images/feedback/image5-select.png',
					},
					{
						type: 6,
						index: 6,
						txt: '其他',
						imageUrl: 'https://mcdn.chatgk.com/xcx/static/images/feedback/image6.png',
						selectedImg: 'https://mcdn.chatgk.com/xcx/static/images/feedback/image6-select.png',
					}
				],
				fileList: [],
				selectedOptions: [],
				phone: '',
				type: []
			}
		},

		methods: {
			// 选择图片
			chooseImage() {
				if (this.fileList.length < 3) {
					uni.chooseImage({
						count: 3, // 最多可以选择的图片张数
						success: (res) => {
							const tempFilePaths = res.tempFilePaths; // 获取选择的图片路径
							const newFiles = tempFilePaths.map(url => ({
								url
							}));
							this.fileList = this.fileList.concat(newFiles); // 更新文件列表
						},
					});
				} else {
					uni.showModal({
						content: '最多上传3张图片',
						showCancel: false
					})
				}
			},
			// 删除指定索引的图片
			removeImage(index) {
				this.fileList.splice(index, 1); // 从列表中移除
			},
			// 验证输入的是数字
			validatePhone() {
				const phoneRegex = /^[0-9]{11}$/; // 简单的电话正则，11位数字
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 邮箱正则

				if (phoneRegex.test(this.phone) || emailRegex.test(this.phone)) {
					this.errorMessage = ''; // 输入有效，清空错误信息
				} else {
					this.errorMessage = '请输入有效的电话号码或邮箱'
				}
			},
			nav_back() {
				uni.navigateBack()
			},
			// clickMessagecell(e) {
			// 	console.log('e', e)
			// 	this.messageString = "#" + e + "# " + this.messageString
			// },


			clickMessagecell(value) {
				const index = this.selectedOptions.indexOf(value.txt);
				if (index === -1) {
					this.selectedOptions.push(value.txt);
					this.type.push(value.type)
				} else {
					this.selectedOptions.splice(index, 1);
					this.type.splice(index, 1)
				}
				this.updateInput();
			},
			updateInput() {
				this.messageString = this.selectedOptions.map(opt => `#${opt}# `).join('');
			},
			updateSelection() {
				this.selectedOptions = this.messageString.split(' ').map(item => item.replace(/^#|#$/g, '')).filter(
					Boolean);
			},

			clicksubmitiButton() {
				let images = []
				if (this.messageString == undefined || this.messageString.length <= 0) {
					uni.showToast({
						title: '反馈内容不能为空！',
						icon: 'none'
					})
					return
				}
				if (this.selectedOptions == undefined || this.selectedOptions.length <= 0) {
					uni.showToast({
						title: '反馈主题至少选择一项！',
						icon: 'none'
					})
					return
				}
				if (this.selectedOptions != undefined && this.selectedOptions.length > 0) {
					for (let v of this.fileList) {
						images.push(v.url)
					}
				}
				if (!this.phone || this.errorMessage == '请输入有效的电话号码或邮箱') {
					uni.showToast({
						title: '请正确填写您的联系方式',
						icon: 'none'
					})
					return
				}
				const data = {
					'content': this.messageString,
					'contact': this.phone,
					'type': this.type.join(','),
					'imgs': images.join(',')
				}
				this.loadshow = true
				this.$request.feedback(data).then(res => {
					this.loadshow = false
					const msg = res.msg;
					uni.showToast({
						title: msg,
						icon: "none"
					})

					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
	}

	.bgview {
		background-color: #F8F8F8;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tag-bgview {
		flex-wrap: wrap;
		margin: 32rpx 32rpx 0 32rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.tag-view {
		border-radius: 10rpx;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin: 0 40rpx 24rpx 0;

		.item {
			width: 202rpx;
			height: 136rpx;
			background: #FFFFFF;
			border-radius: 10rpx;

			display: flex;
			flex-direction: column;
			text-align: center;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin: 24rpx 0 12rpx 0;
			}

			.tag-text {
				margin: 0 10rpx 0 10rpx;
				color: #999999;
				font-size: 28rpx;
			}
		}


	}

	.tag-view.active {
		.item {
			background: #FF3B0A;
			opacity: 0.8;

			.tag-text {
				color: #FFFFFF;
			}
		}
	}

	.tag-view:nth-child(3),
	.tag-view:nth-child(6) {
		margin-right: 0;
	}

	.title {
		font-size: 24rpx;
		color: #FF3B0A;
		width: 146rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #FCB19B 0%, rgba(255, 216, 193, 0) 100%);
		border-radius: 30rpx 0rpx 0rpx 0rpx;
		display: flex;
		text-align: center;
		align-items: center;
		padding-left: 24rpx;

	}

	.content2 {
		margin-top: 24rpx;
	}

	.textViewBox {
		background-color: white;
		height: 438rpx;
		border-radius: 20rpx;
		width: calc(100vw - 64rpx);
		position: relative;

		.unLoadImages {
			position: absolute;
			bottom: 32rpx;
			left: 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			z-index: 9999;

			.image-list {

				.listItem {
					position: relative;
					margin: 0 20rpx 20rpx 0;

					.image-preview {
						width: 144rpx;
						height: 144rpx;
					}

					.deletButton {
						width: 32rpx;
						height: 32rpx;
						position: absolute;
						top: -12rpx;
						right: -12rpx;
					}
				}
			}

			.upLoadButton {
				width: 72rpx;
				height: 72rpx;
			}
		}
	}

	.textInputView {
		color: #464646;
		padding: 32rpx;
		width: 100%;
		height: 100%;
	}

	.input-phone {
		padding-left: 32rpx;
		width: calc(100vw - 64rpx);
		height: 104rpx;
		background: #FFFFFF;
		border-radius: 0rpx 16rpx 16rpx 16rpx;
	}

	.error {
		color: red;
		font-size: 14px;
		margin-top: 20rpx;
	}

	.submiti {
		width: 638rpx;
		height: 76rpx;
		background: linear-gradient(180deg, #FF3B0A 0%, #FF3B0A 100%);
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(255, 59, 10, 0.3);
		border-radius: 38rpx;
		display: flex;
		margin: 94rpx 0;

		.submitiButton {
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: auto;
		}
	}
</style>